import "./App.css";
import React, { useState, useEffect, useCallback } from "react";
import { Five } from "@realsee/five";
// import { GLTFLoader } from "@realsee/five/gltf-loader";
import {FiveCanvas,useFiveCurrentState,useFiveProject2d,useFiveEventCallback,useFiveSceneEffect} from "@realsee/five/react";
import useWindowDimensions from "./useWindowDimensions";
import axios from "axios";
import { Vector3, Vector2 } from "three";
import tags_data from "./data/tag.json";
import testMode1 from "./data/test.gltf";
import testMode2 from "./data/guabiao.gltf";
import { GLTFLoader } from "@realsee/five/gltf-loader";
const Main = () => {
  let [jsonData,setJsondata] = useState(0)
  useEffect(() => {
    axios.get("http://218.249.218.102:18889/open/v1/entity/roompicture?vr_code=802kbe37PwJOwMYqG8").then((res) => {
      setJsondata(jsonData = res.data.data);
    });
    return (()=>{
      setJsondata(jsonData = []);
    })
  },[])
  const [state, setState] = (0, useFiveCurrentState)();
  const [currentState, setCurrent] = (0, useFiveCurrentState)();
  // 适应尺寸
  const size = useWindowDimensions();
  // 底部分区图片按钮
  const [list, setList] = useState([
    {
      img: require("./img/kt1.png"),
    },
    {
      img: require("./img/wsB1.png"),
    },
    {
      img: require("./img/wsA.png"),
    },
    {
      img: require("./img/cf.png"),
    },
    {
      img: require("./img/wsj.png"),
    },
    {
      img: require("./img/wsB2.png"),
    },
  ]);
  // 底部导航
  const [imgList, setimgList] = useState([
    {
      img: require("./img/shizhong.png"),
      name: "预约",
    },
    {
      img: require("./img/vcr.png"),
      name: "视频通话",
    },
    {
      img: require("./img/daolan.png"),
      name: "导览",
    },
    {
      img: require("./img/a-3D.png"),
      name: "3D",
    },
  ]);
  // 导览图片
  const [dlimgList, setdlimgList] = useState([
    {
      img: require("./img/dl1.jpg"),
    },
    {
      img: require("./img/dl2.jpg"),
    },
    {
      img: require("./img/dl3.jpg"),
    },
    {
      img: require("./img/dl4.jpg"),
    },
  ]);
  // 分区按钮点击
  let [navidx, setNav] = useState(5);
  // 分间图数据
  let [hxtdata, setHxtdata] = useState(0);
  function handClick(idx) {
    setNav((navidx = idx));
    setHxtdata(hxtdata = jsonData[idx].capture_data)
    setTimeout(() => {
      // 下面这个数据具体值就是截图时对应的 currentState 值，取出来保存即可
      let testState = {
        fov: hxtdata.fov,
        latitude: hxtdata.latitude,
        longitude: hxtdata.longitude,
        mode: "Panorama",
        offset: {
          x: -5.576590061187744,
          y: -0.09492909908294678,
          z: -0.6104490160942078,
        },
        panoIndex: hxtdata.pano_index,
      };
      setCurrent(testState);
    }, 500);
  }
  let [butidx, setBut] = useState(0);
  // 导航按钮点击
  function changeMode(mode, idx) {
    if (idx === 3) {
      setState({ mode });
    }
    if (idx === 2) {
      toggleActive(true)
      if(toggleActive(true)){
        setTimeout(() => {
          toggleActive(false)
        },2000)
      }else{
        setTimeout(() => {
          toggleActive(true)
        },1000)
      }
      document.querySelector(".box").style.animation = "animate1 1.5s linear infinite";
      document.querySelector(".box").style.animationIterationCount = "1";
      document.querySelector(".box").style.animationFillMode = "forwards";
      document.querySelector(".audios").style.display = "block";
      document.querySelector(".exitDaoLana").style.display = "block";
      document.getElementById("mp3Btn").play();
      let dlidx = 0;
      handClick(dlidx);
      let playInterval = setInterval(() => {
        dlidx++;
        let isEnd = window.localStorage.getItem("isEnd");
        if (isEnd) {
          dlidx = 5;
          clearInterval(playInterval);
          document.getElementById("mp3Btn").load();
          document.getElementById("mp3Btn").pause();
          window.localStorage.removeItem("isEnd");
          document.querySelector(".audios").style.display = "none";
          document.querySelector(".exitDaoLana").style.display = "none";
          document.querySelector(".box").style.animation = "animate2 1.5s linear infinite";
          document.querySelector(".box").style.animationIterationCount = "1";
          document.querySelector(".box").style.animationFillMode = "forwards";
        }
        if (dlidx === 5) {
          toggleActive(false)
        }
        if (dlidx === 6) {
          clearInterval(playInterval);
          window.localStorage.removeItem("isEnd");
          setTimeout(() => {
            document.querySelector(".audios").style.display = "none";
            document.querySelector(".exitDaoLana").style.display = "none";
            document.querySelector(".box").style.animation = "animate2 1.5s linear infinite";
            document.querySelector(".box").style.animationIterationCount = "1";
            document.querySelector(".box").style.animationFillMode = "forwards";
          }, 1000);
          return false;
        }
        handClick(dlidx);
      }, 5000);
    }
    if (butidx === 0) {
      setBut((butidx = 1));
    } else {
      setBut((butidx = 0));
    }
  }
  // 3D坐标转2D坐标
  const project2d = useFiveProject2d();
  tags_data.map((ele) => {
    ele.position = new Vector3(ele.position.x, ele.position.y, ele.position.z);
    return ele;
  });
  const [tags, setTags] = useState([...tags_data]);
  const [newTag, setNewTag] = useState(null);
  //点击弹框
  let [tstate, setTState] = useState(false);
  function changeMode2() {
    setTState((tstate = false));
  }
  const [mstate, setMState] = (0, useFiveCurrentState)();
  function changeMode1(mode) {
  setMState({ mode });
  }
  let [showTag,setShowTag] = useState(false);
  useFiveEventCallback("initAnimationEnded", () => {
    // console.log(mstate);
    if(mstate.mode=='Panorama'){
    setShowTag(showTag=true);
    }
    else{
    setShowTag(showTag=false);
    }
    },[mstate]);

  const yyimg = require("./img/yinyue.png");
  const audiourl = require("./img/mp3.m4a");
  //是否旋转视角
  let [active, toggleActive] = useState(false);
  useEffect(() => {
    if (active) {
      const timer = window.setInterval(() => {
        setState(prevState => {
          return { longitude: prevState.longitude + Math.PI / 364.5};
        });
      },17.5);
      return () => window.clearInterval(timer);
    }
  }, [active]);
  //户型图展示

  function exitDaolan() {
    window.localStorage.setItem("isEnd", true);
  }
  function tagElement(tag, key) {
    const position = tag.position && project2d(tag.position, true);
    const style = position ? { left: position.x, top: position.y } : { display: "none" };
    return (
      <div className="tag" style={style} key={key}>
        <img src={tag.flag==0||tag.flag==1?require(`${tag.imgurl}`):''} className={tag.flag==0?"tag-img":"tag-img1"} onClick={tag.flag==0?() => {showBottomSlider(tag.label)}:() => {}}/>
        <div style={tag.flag==0?{display:"block"}:{display:"none"}} className={tag.img ? "tag-pannel tag-pannel-img" : "tag-pannel"} onClick={() => {showBottomSlider(tag.label);}}>
          <span className="tag-content">{tag.label}</span>
        </div>
        <div style={tag.flag==1||tag.flag==2?{display:"block"}:{display:"none"}} className='tag-pannel1'>
          <span>{tag.label}</span>
        </div>
      </div>
    );
  }
  let [showSlider, toShowSlider] = useState(false);
  function showBottomSlider(title) {
    toShowSlider((showSlider = true));
    setTState((tstate = showSlider));
  }
  //模型嵌入
  useFiveSceneEffect(outScene => {
      const gltfLoader = new GLTFLoader();
      // 载入 glTF 模型
      gltfLoader.load(testMode1, ({ scene }) => {
      // 加入到 Five 三维空间场景中
      outScene.add(scene);
      // 设置好大小和空间位置
      scene.scale.set(0.8, 0.8, 0.8);
      scene.position.set(-4.519154193993874, -0.7590650803604396, 1.5284256466400805);
    });
  });
  useFiveSceneEffect(outScene => {
    const gltfLoader = new GLTFLoader();
    // 载入 glTF 模型
    gltfLoader.load(testMode2, ({ scene }) => {
      // 加入到 Five 三维空间场景中
      outScene.add(scene);
      // 设置好大小和空间位置
      scene.scale.set(1.5, 1.5, 1.5);
      scene.rotation.set(3.9,1.9,1.1)
      scene.position.set(-8.8,0.15,7.555);
    });
  });

  // 页面主体
  return (
    <>
      <FiveCanvas {...size} />
      <div className="exitDaoLana" onClick={() => exitDaolan()||toggleActive(false)}>
        <img src={require("./img/close2.png")} alt="" />
      </div>
      {newTag && tagElement(newTag)}
      { tags && mstate.mode === "Panorama"&&
        showTag &&
        tags.map((tag, index) => tagElement(tag, index))}
      <div
        className="five-PanoFloorplanRadarPlugin"
        onClick={() => changeMode1(Five.Mode.Topview)}
      >
        <div className="five-1">
          <span>
            <img src="http://vrlab-public.ljcdn.com/release/vrcustomer/outline_0_9943af29-2343-481e-a79c-4163e3f6148c.png" />
          </span>
        </div>
      </div>
      <div className={tstate ? "mask" : "none"}>
        <div className="div2">
        <img src={require('./img/close2.png')} style={{float:"right",margin:"7px",width:"20px",height:"20px"}} onClick={() => changeMode2()}/>
          <div className="div3" style={{}}>
            <h1
              style={{ color: "#ffffff", fontSize: "20px", fontFamily: "黑体" }}
            >
              户型
            </h1>
            <span
              style={{ color: "#fe615a", fontSize: "12px", marginTop: "5x" }}
            >
              3卧室1厅1卫1厨
            </span>
          </div>
          <div className="div4">
            <h1
              style={{ color: "#ffffff", fontSize: "20px", fontFamily: "黑体" }}
            >
              朝向
            </h1>
            <span
              style={{ color: "#fe615a", fontSize: "12px", marginTop: "5x" }}
            >
              坐北朝南
            </span>
          </div>
          <div className="div4">
            <h1
              style={{ color: "#ffffff", fontSize: "15px", fontFamily: "黑体" }}
            >
              小区信息
            </h1>
          </div>
          <div className="div4">
            <p className="fontcolor" style={{ marginTop: "5x" }}>
              绿化率：<span style={{ color: "#e3e3e3" }}>30%</span>
            </p>
            <p className="fontcolor" style={{ marginTop: "5px" }}>
              容积率：<span style={{ color: "#e3e3e3" }}>2.4</span>
            </p>
            <p className="fontcolor" style={{ marginTop: "5px" }}>
              物业费用：<span style={{ color: "#e3e3e3" }}>5.0/月</span>
            </p>
            <div className="div4-1">
              <p className="fontcolor" style={{ marginTop: "5px" }}>
                燃气费用：<span style={{ color: "#e3e3e3" }}>2.6元/m³</span>
              </p>
              <p className="fontcolor" style={{ marginTop: "5px" }}>
                固定车位：<span style={{ color: "#e3e3e3" }}>750元/月</span>
              </p>
              <p className="fontcolor" style={{ marginTop: "5px" }}>
                物业公司：
                <span style={{ color: "#e3e3e3" }}>XXX服务有限公司</span>
              </p>
            </div>
          </div>
          <div className="div5">
            <p className="fontcolor">小区图集</p>
            <div className="bor">
              <img
                style={{
                  width: "180px",
                  height: "180px",
                  borderRadius: "10px",
                }}
                src={require("./img/xue.jpg")}
                alt=""
              />
              <img
                style={{
                  width: "180px",
                  height: "180px",
                  borderRadius: "10px",
                }}
                src={require("./img/xue2.jpg")}
                alt=""
              />
            </div>
          </div>
          <div className="div4">
            <p className="fontcolor">采集信息</p>
            <img
              style={{
                width: "150px",
                height: "150px",
                borderRadius: "10px",
                float: "right",
              }}
              src={require("./img/rs.png")}
              alt=""
            />
            <p className="fontcolor1" style={{ marginTop: "10px" }}>
              采集设备：<span style={{ color: "#e3e3e3" }}>RS401010</span>
            </p>
            <p className="fontcolor1" style={{ marginTop: "10px" }}>
              深度数据：<span style={{ color: "#e3e3e3" }}>850nm Lidar</span>
            </p>
            <p className="fontcolor1" style={{ marginTop: "10px" }}>
              彩色信息：<span style={{ color: "#e3e3e3" }}>1024*1024px</span>
            </p>
            <p className="fontcolor1" style={{ marginTop: "10px" }}>
              采集高度：<span style={{ color: "#e3e3e3" }}>11.575cm</span>
            </p>
            <p className="fontcolor1" style={{ marginTop: "10px" }}>
              采集人员：<span style={{ color: "#e3e3e3" }}>VR手机架</span>
            </p>
          </div>
          <div style={{ marginTop: "10%" }}>
            <hr style={{ width: "90%", color: "#27241f" }} />
            <span className="fontcolor" style={{ marginLeft: "30%" }}>
              于2022年3月14号 拍摄采集
            </span>
          </div>
        </div>
      </div>
      <div className="box">
        <div className="nav_box">
          <ul>
            {imgList.map((ele, index) => {
              return (
                <li
                  key={index}
                  onClick={() =>
                    changeMode(
                      butidx === 0 ? Five.Mode.Floorplan : Five.Mode.Panorama,
                      index
                    )
                  }
                >
                  <p>
                    <img src={ele.img} alt="" />
                  </p>
                  <p>{ele.name}</p>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="bot_box">
          <ul>
            {list.map((ele,index) => {
              return (
                <li
                  key={index}
                  onClick={() => handClick(index)} 
                  className={index === navidx ? "bgcolor" : ""}
                >
                  <img src={ele.img} alt="" />
                </li>
              );
            })}
          </ul>
        </div>
      </div>
      <div className="audios">
        <audio id="mp3Btn" src={audiourl} autoPlay={false}></audio>
        <img src={yyimg} alt="" />
      </div>
      {/* <div className="dlimg_box">
        <img src={dlimgList[0].img} alt="" />
      </div> */}
    </>
  );
};
export default Main;
